/* React 高阶组件 */
import React from 'react'

/*
*  React 高阶组件 ：利用js中的闭包(柯里化函数)实现的组件代理
*       + 在HOC中，渲染的还是当前组件
*       + 好处：可以在代理组件中，经过业务逻辑处理，获取一些信息，最后基于属性等方案，传递给要渲染的组件
* */

const Demo = function (props) {
    console.log("demo中的props", props)
    return <div className="demo">
        我是DEMO
    </div>
}

// 执行 ProxyTest 方法，传递一个组件 (Component)
const ProxyTest = function (Component) {
    // Component -> Demo
    // HOC: higher order components

    let isUse = false  // 可以把逻辑传递给类组件
    return function HOC(props) {
        console.log("HOC中的props", props)
        // 真实渲染的是 dome 组件:把获取的 props 传递给demo

        return <Component {...props} isUse={isUse}/>
    }
}

export default ProxyTest(Demo)
// 把函数执行的返回结果，基于ES6Module 规范导出，共App导入使用
// 当前案例中，导出的是 HOC 高阶组件
